// 默认样式，使用默认颜色值
.theme-default {
  --background-color: rgb(255,255,255); // 页面的背景色
  --color: #4a4c51;
  --asideBgColor: #ededed; // 左侧背景色
  --headBgColor: #f9f9f9;// headre 背景色
  --mainBgColor: #ffffff;// 右边背景色
  --tabItemColor: #6a6a6a;//header 上tab 未选中颜色
  --tabItemSelectedColor: #050505;//header 上tab 选中颜色
  --headIconHoverBg: #e5e5e5;//header 上icon hover颜色
  --userColor: #4a4c51;//header 上用户颜色
  --searchBgColor:#ececec;//header 上搜索栏背景色
  --backLeftIconDisColor: #cfcfcf;//header 上退回icon的禁用色
  //--------------------
  --asideHoverBg: #e1e1e1; //aside hover
  --headHoverColor: #050505; //hover
  --myMusicColor:#a2a2a2; //我的音乐字体
  --footerBg: #fff; //footer
  --defPointerColor: #e5e5e5; //轮播图点
  --defPointerRedColor: #d33a31; //轮播图点ed
  --hoverColor: #000;
  --hoverbg:#f5f5f5;//主体hover
  --defBorderColor:#f2f2f2;//border
  --fzFontColor: #999999;//字体浅色
  --fzBg:#ffffff;
  --fzItemBg:#fafafa;
  --fzSeledBg:#fdf6f5;
  --btnHover: #f2f2f2;
  --mainItemBg: #fafafa;
  --mainItemBgHover: #f0f0f0;
}
// 暗黑主题
.theme-dark {
  --background-color: rgb(0,0,0); // 页面的背景色
  --color: #b5b5b5;//4a4c51
  --asideBgColor: #202020; // 左侧背景色
  --headBgColor: #2e2e2e;// headre 背景色
  --mainBgColor: #262626;// 右边背景色
  --tabItemColor: #6a6a6a;//header 上tab 未选中颜色
  --tabItemSelectedColor: #fff;//header 上tab 选中颜色
  --headIconHoverBg: #373737;//header 上icon hover颜色
  --userColor: #b0b0b0;//header 上用户颜色
  --searchBgColor:#2a2a2a;//header 上搜索栏背景色
  --backLeftIconDisColor: #434343;//header 上退回icon的禁用色
  --asideHoverBg: #1b1b1b;
  --headHoverColor: #b5b5b5;
  --myMusicColor:#888888;
  --footerBg: #252525;
  --defPointerColor: #3b3b3b;
  --defPointerRedColor: #d33a31;
  --hoverColor: #fff;

  --hoverbg:#2e2e2e;//主体hover
  --defBorderColor:#252525;//border
  --fzFontColor: #626262;//字体浅色
  --fzBg:#363636;
  --fzItemBg:#3a3a3a;
  --fzSeledBg:#2e2726;
  --btnHover: #303030;
  --mainItemBg: #292929;//292929
  --mainItemBgHover: #323232;
  
}
// 红色
.theme-red {
  --headBgColor: #d33a31; // 页面的背景色
  --asideBgColor: #ededed;
  --tabItemColor: #f4c3c0;
  --tabItemSelectedColor: #ffffff;
  --headIconHoverBg: #cc4b43;
  --color: #4a4c51;
  --userColor: #f4c3c0;
  --searchBgColor:#e06c64;
  --backLeftIconDisColor: #d26e68;
  --asideHoverBg: #e1e1e1;
  --headHoverColor: #f7eded;
  --myMusicColor:#a2a2a2;
  --footerBg: #fff;
  --defPointerColor: #e5e5e5;
  --defPointerRedColor: #d33a31;
  --hoverColor: #000;
  --hoverbg:#f5f5f5;//主体hover
  --defBorderColor:#f2f2f2;//border
  --fzFontColor: #999999;//字体浅色
  --fzBg:#ffffff;
  --fzItemBg:#fafafa;
  --fzSeledBg:#fdf6f5;
  --btnHover: #f2f2f2;
  --mainItemBg: #fafafa;
  --mainItemBgHover: #f0f0f0;
}

@pageBgColor: var(--background-color);
@color: var(--color);
@asideBgColor: var(--asideBgColor);
@headBgColor: var(--headBgColor);
@mainBgColor: var(--mainBgColor);
@tabItemColor: var(--tabItemColor);
@tabItemSelectedColor: var(--tabItemSelectedColor);
@headIconHoverBg: var(--headIconHoverBg);
@userColor: var(--userColor);
@searchBgColor: var(--searchBgColor);
@backLeftIconDisColor: var(--backLeftIconDisColor);
@asideHoverBg: var(--asideHoverBg);
@headHoverColor:var(--headHoverColor);
@myMusicColor:var(--myMusicColor);
@footerBg:var(--footerBg);
@defPointerColor:var(--defPointerColor);
@defPointerRedColor:var(--defPointerRedColor);
@hoverColor:var(--hoverColor);
@hoverbg:var(--hoverbg);
@defBorderColor:var(--defBorderColor);
@fzFontColor:var(--fzFontColor);
@fzBg:var(--fzBg);
@fzItemBg:var(--fzItemBg);
@fzSeledBg:var(--fzSeledBg);
@btnHover:var(--btnHover);
@mainItemBg:var(--mainItemBg);
@mainItemBgHover:var(--mainItemBgHover);

